<template>
    <div class="account-manage" :style="{ height: `${viewheight.GetViewHeight(176)}px` }">
        <el-scrollbar>
            <el-divider content-position="left">修改个人信息</el-divider>
            <div class="account-base">
                <FormComponent ref="formRefBase" :field-colums="ActBaseCon" @submit="getMajor" />
                <div class="options">
                    <el-button type="primary" @click="updata">
                        <IconPark :icon="Edit" :stroke-width="3" :theme="'filled'" />Edit
                    </el-button>
                    <el-button type="warning" @click="resetdata">
                        <IconPark :icon="ClearFormat" :stroke-width="3" :theme="'filled'" />Reset
                    </el-button>
                </div>
            </div>
            <el-divider content-position="left">修改密码</el-divider>
            <div class="account-password">
                <FormComponent ref="formRefpassword" :field-colums="ActPwdCon">
                    <template v-slot:code>
                        <div class="code">
                            <el-input v-model="code" />
                            <el-button @click="getCode">获取<span v-if="verilfytime">{{ verilfytime + 's'
                            }}</span></el-button>
                        </div>
                    </template>
                </FormComponent>
                <div class="options">
                    <el-button type="primary" @click="upPw">
                        <IconPark :icon="Edit" :stroke-width="3" :theme="'filled'" />Edit
                    </el-button>
                    <el-button type="warning" @click="ressetPw">
                        <IconPark :icon="ClearFormat" :stroke-width="3" :theme="'filled'" />Reset
                    </el-button>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import FormComponent from "@components/FormComponent/FormComponent.vue";
import { ActBaseCon } from "../config/account-base-config";
import { ActPwdCon } from "../config/account-password-config";
import { useViewHeightStore } from "@/store/viewheight";
import { ref, onMounted } from "vue";
import { useUserInfo } from "@store/userinfo";
import { storeToRefs } from "pinia";
import { Edit, ClearFormat } from "@icon-park/vue-next";
import { userupdata, usercode, useruppw } from "@api/userapi";
import { useCollege } from "@store/collegeinfo";
import { get_major } from "@/api/college";

const store = useUserInfo();
const { userinfo } = storeToRefs(store);
const { FormCon } = storeToRefs(useCollege());
const formRefBase = ref<InstanceType<typeof FormComponent>>();
const formRefpassword = ref<InstanceType<typeof FormComponent>>();
const viewheight = useViewHeightStore();
const verilfytime = ref<number>(0);
let timeer = null;
const code = ref<string>();
const college = ref<string>("");

const updata = async () => {
    const res = await userupdata(formRefBase.value.formData);
    if (res.code == 200) {
        ElMessage.success(res.msg);
        userinfo.value = res.data;
    }
}

const getMajor = async (formData) => {
    if (college.value !== formData.value.college) {
        if (!formData.value.college) {
            ActBaseCon[6].options = [];
        } else {
            const res = await get_major({ college: formData.value.college });
            if (res.code === 200) {
                ActBaseCon[6].options = [];
                res.data.forEach((item) => {
                    ActBaseCon[6].options.push({
                        value: item,
                        label: item
                    })
                })
            }
        }
    }
    college.value = formData.value.college;
}

const getCode = async () => {
    const res = await usercode({ email: userinfo.value.email });
    if (res.code === 200) {
        ElMessage({
            message: res.msg,
            type: "success"
        })
        verilfytime.value = 300;
        clearInterval(timeer);
        timeer = setInterval(() => {
            verilfytime.value--;
        }, 1000)
        return true;
    }
    ElMessage.error(res.msg);
}

const upPw = async () => {
    const res = await useruppw({ ...formRefpassword.value.formData, code: code.value });
    if (res.code === 200) {
        ElMessage.success(res.msg);
        return;
    }
    ElMessage.error(res.msg);
}

const ressetPw = () => {
    code.value = '';
    formRefpassword.value.onReset();
}

const resetdata = () => {
    formRefBase.value.formData = JSON.parse(JSON.stringify(userinfo.value));
}

onMounted(() => {
    formRefBase.value.formData = JSON.parse(JSON.stringify(userinfo.value));
    ActBaseCon[5].options = FormCon.value[0].options;
})

</script>

<style scoped lang="less">
.account-manage {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .account-base {
        width: 500px;
        margin: 0 150px;
    }

    .account-password {
        width: 500px;
        margin: 0 150px;

        .code {
            display: flex;

            .el-input {
                margin-right: 20px;
            }
        }
    }

    .options {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
}
</style>